{{define "blog/article/edit.html"}} {{ template "header" . }}

<head>
    <link rel="stylesheet" href="/assets/editor.md/css/editormd.css" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="ibox-title">
            系统管理 / 帮助中心管理 / 添加帮助信息
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="form-horizontal">
                            <input type="hidden" name="token" value="{{ .token }}">
                            <input type="hidden" name="id" value="{{ .data.ID }}">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">标题：</label>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="" name="title" class="form-control" required value="{{.data.Title}}"> <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">所属分类：</label>
                                <div class="col-sm-3">
                                    <select class="form-control" id="article_type" required>
                                    <option value="0">请选择所属分类</option>
                                    {{$tid := .data.ArticleTypeId}}
                                    {{range .type }}
                                        <option value="{{.ID}}" lang="{{.LangType}}" {{if eq .ID $tid}} selected {{end}}>{{.TypeName}}</option>
                                    {{end}}
                                </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">语言类型：</label>
                                <div class="col-sm-3">
                                    <input type="radio" id="chn" name="lang_type" class="custom-control-input lang_type" value="1" disabled>
                                    <label class="custom-control-label" for="chn" style="margin-right: 10px">中文</label>
                                    <input type="radio" id="eng" name="lang_type" class="custom-control-input lang_type" value="2" disabled>
                                    <label class="custom-control-label" for="eng">英语</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">排序：</label>
                                <div class="col-sm-3">
                                    <input type="number" placeholder="" name="sort_num" class="form-control" required max="99999" value="{{.data.SortNum}}"> <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">内容：</label>
                                <div class="col-sm-10">
                                    <div id="x-editormd">
                                        <textarea id="content" style="display:none;">{{.data.Content}}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-3">
                                    <button class="btn btn-sm btn-primary" onclick="edit()">添 加</button>
                                    <a href="/blog/article" class="btn btn-sm btn-white">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

{{ template "footer" . }}
<script src="/assets/editor.md/editormd.js"></script>

<script>
    xEditor = editormd("x-editormd", {
        width: "90%",
        height: 640,
        //theme : "dark",
        //previewTheme : "dark",
        //editorTheme : "pastel-on-dark",
        codeFold: true,
        syncScrolling: "single",
        path: "/assets/editor.md/lib/",
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/blog/upload/editor",
        sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
        emoji: true,
        taskList: true,
        tocm: true, // Using [TOCM]
        tex: true, // 开启科学公式TeX语言支持，默认关闭
        flowChart: true, // 开启流程图支持，默认关闭
    });


    $(function() {
        let lang_type = $("#article_type").find("option:selected").attr("lang");
        document.querySelectorAll(".lang_type").forEach((item) => {
            item.checked = false
            if (item.value == lang_type) {
                item.checked = true
                return
            }

        })
    })

    function edit() {
        let token = $("input[name='token']").val();
        let id = $("input[name='id']").val();
        let title = $("input[name='title']").val();
        let sort_num = $("input[name='sort_num']").val();
        let lang_type = $("input[name='lang_type']:checked").val();
        let article_type_id = $("#article_type").val()
        let content = $("#content").val()
        let prompt_msg = "";

        if (content.length < 10) {
            prompt_msg = "内容太短了，多写一点？";
        }
        if (title.length < 3 || title.length > 100) {
            prompt_msg = "请输入3~50个字符的标题";
        }
        if (0 === parseInt(article_type_id)) {
            prompt_msg = "请选择所属分类";
        }
        if (prompt_msg !== "") {
            layer.msg(prompt_msg, {
                icon: 2,
                time: 1200,
                title: "提示"
            });
            return;
        }
        let data = {
            title,
            token,
            sort_num,
            lang_type,
            article_type_id,
            content,
            id
        }

        $.post("/blog/article/edit", data, function(res) {
            // var jsonData = $.parseJSON(res);
            var jsonData = res
            if (jsonData.status !== 200 && jsonData.status !== 20023) {
                if (jsonData.status !== 20007) {
                    $("input[name='token']").val(jsonData.data);
                }
                layer.msg(jsonData.message, {
                    icon: 2,
                    time: 1200,
                    title: "提示"
                });
            } else if (jsonData.status === 20023) {
                window.location.href = "/nopermission";
            } else {
                layer.msg(jsonData.message, {
                    icon: 1,
                    time: 1000,
                    title: "提示",
                    end: function() {
                        window.location.href = "/blog/article";
                    }
                });
            }
        });
    }
    document.querySelector("#article_type").onchange = function() {
        let lang_type = $(this).find("option:selected").attr("lang");
        document.querySelectorAll(".lang_type").forEach((item) => {
            item.checked = false
            if (item.value == lang_type) {
                item.checked = true
                return
            }

        })
    }
</script>
{{end}}